<template>
    <div class="payGifts_wrapper">
        <div class="gift_header">
            <div class="gift_icon">
                <img :src="giftIconUrl" alt="" />
            </div>
            <div class="gift_content">
                <h4 class="gift_name">支付有礼</h4>
                <p class="gift_desc">用户购买成功后领取福利，提升复购率</p>
                <p class="gift_analyse">订购说明：该功能暂不支持单独售卖，仅支持专业版、旗舰版商家使用。</p>
                <div class="gift_btn_group">
                    <el-button type="primary" @click="userImmmedOrder">立即订购</el-button>
                    <el-button @click="userFreeTrial">免费试用</el-button>
                </div>
            </div>
        </div>
        <div class="gift_intro">
            <h4 class="title">功能介绍</h4>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            giftIconUrl: require('@/assets/img/gift.png'),
        }
    },
    mounted(){

    },
    methods: {
        userImmmedOrder(){  // 立即订购

        },
        userFreeTrial(){    // 免费试用
            this.$router.push({
                path: '/payGifts/freeTrial'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.payGifts_wrapper{
    .gift_header{
        display: flex;
        padding: 20px;
        background-color: #fff;
        margin: 10px 0;
        .gift_icon{
            width: 180px;
            img{
                display: block;
                width: 100%;
            }
        }
        .gift_content{
            padding: 0 0 0 30px;
            .gift_name{
                margin-bottom: 10px;
                font-size: 24px;
                color: #353535;
                font-weight: 600;
            }
            .gift_desc{
                color: #333;
                font-size: 14px;
                font-weight: 400;
            }
            .gift_analyse{
                color: #999;
                margin-top: 10px;
            }
            .gift_btn_group{
                margin: 30px 0 0 0;
            }
        }
    }
    .gift_intro{
        min-height: 500px;
        background-color: #fff;
        .title{
            color: #333;
            font-size: 16px;
            font-weight: normal;
            line-height: 50px;
            padding: 0 20px;
            border-bottom: 1px solid #eee;
        }
    }
}
</style>